<template>
        <div class="carousel">
          <ul>
            <li><a href="#">.</a></li>
            <li><a href="#section2">.</a></li>
            <li><a href="#section3">.</a></li>
            <li><a href="#section4">.</a></li>
          </ul>
        </div>
        <div class="head">
          <div class="top"><hr class="hr"></div>
          <div class="center">
            <div class="title">
              <el-menu mode="horizontal" default-active="1" active-text-color="green" :ellipsis="false"
                       text-color="black">
                <div class="logo">
                  <el-popover placement="bottom" trigger="hover" content="微信支付合作伙伴平台" :width="170"><template #reference>
                  <el-menu-item index="1"><img src="img1/logo1.png"></el-menu-item>
                  </template>
                </el-popover>
                </div>
                <div class="flex-grow"></div>
                  <el-menu-item index="1">首页</el-menu-item>
                  <el-menu-item index="2"><router-link to="/part">成为合作伙伴</router-link></el-menu-item>
                <el-menu-item index="3"><router-link to="/ability">合作伙伴能力</router-link></el-menu-item>
                  <el-menu-item index="4"><router-link to="/grow">合作伙伴成长</router-link></el-menu-item>
                  <el-menu-item index="5"><router-link to="/file">文档中心</router-link></el-menu-item>
              </el-menu>
            </div>
            </div>
        </div>

        <div class="video-box" >
          <div class="login">
            <el-card style="height: 380px;padding: 0">
              <img class="login1" src="img1/login1.png" v-show="on" @click="click1">
              <img class="login2" src="img1/login2.png" v-show="off" @click="click2">
            <div class="l1" v-show="on">
              <span>账号密码登录</span>
              <el-input placeholder="登录账号" style="margin:16px 0 10px 0;height: 42px;;width: 250px">
                <template #prefix>
                  <el-icon size="20px" color="#0aa1ed"><User/></el-icon>
                </template>
              </el-input>
              <el-input placeholder="登录密码" style="margin-bottom: 10px;height: 42px;;width: 250px">
                <template #prefix>
                  <el-icon size="20px" color="#0aa1ed"><Lock /></el-icon>
                </template>
              </el-input>
              <div class="input3">
                <el-input placeholder="验证码" style="width: 100px;height: 42px"></el-input>
                <img src="img1/yzm.png" style="height: 42px;vertical-align: middle;">
                <a href="#">换一张</a>
              </div>
              <el-button type="success" style="width: 250px;height: 42px;margin:20px auto;font-size: 18px">登录</el-button>
              <a href="#" style="color: black;">忘记密码？</a>
              <p style="margin: 16px 0 16px 0"><a href="#" style="margin-right: 16px;color: limegreen">绑定微信号</a>|<a href="#" style="margin-left: 16px;color: limegreen">找回服务商号</a></p>
            </div>
            </el-card>
            <div class="l2" v-show="off">
              <span>微信扫码登录</span>
              <img src="img1/weima.png" style="margin: 20px 0 10px 0">
              <p style="margin: 16px 0 16px 0"><a href="#" style="margin-right: 16px;color: limegreen">绑定微信号</a>|<a href="#" style="margin-left: 16px;color: limegreen">找回服务商号</a></p>
            </div>
          </div>
          <video class="video" style="width:100%;"  muted autoplay loop src="img1/logo.mp4"></video>
          <div class="video-bo">
            <el-carousel indicator-position="none" motion-blur="true" direction="vertical" style="width:100%;height: 125px;" >
              <el-carousel-item><span>微信支付&nbsp;不止支付
                &nbsp;&nbsp;&nbsp;平台开放更多能力,与服务商一起成长！</span></el-carousel-item>
              <el-carousel-item><span>重庆袁家岗中心&nbsp;项目经理：何博</span></el-carousel-item>
              <el-carousel-item><span>由下班第一个（6）团队倾尽全力打造！</span></el-carousel-item>
              <el-carousel-item><span>小组成员：何鑫、周林辉、刘采玲、冉消洋、李松泽</span></el-carousel-item>
              <el-carousel-item>
                <img src="img1/hx.png" style="height: 125px" >
                <img src="img1/hui.png" style="height: 125px" >
                <img src="img1/ling.png" style="height: 125px" >
                <img src="img1/ran.png" style="height: 125px" >
                <img src="img1/li.png" style="height: 125px" >
                <img src="img1/hao.png" style="height: 125px" >
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
  <div class="f2" id="section2">
    <div class="a">
      <div class="a1">
        <img src="/img1/f2/f1.png" style="border-top-left-radius: 3px;border-bottom-left-radius: 3px">
        <div class="t">
          <div class="t1">为商家提供支付服务</div>
          <div class="t2">为商家提供移动支付解决方案</div>
          <div class="t3">
            <span>场景覆盖</span>
            <span>资源开放</span>
            <span>合作共创</span>
          </div>
        </div>
      </div>
      <div class="a2">
        <div style="margin: 150px 0 50px 30px;color: white;text-align: left">
          <p style="font-size: 36px;margin-bottom: 10px">为商家提供支付服务</p>
          <span style="font-size: 14px;">为商家提供移动支付解决方案</span>
        </div>
        <div>
          <div style="margin: 0 0 0 30px;color: white;text-align: left;height: 50px;line-height: 40px">
            <el-icon size="50px" color="white" style="vertical-align: bottom;"><ChatDotRound /></el-icon>
            <div style="text-align: left;display: inline-block;">
              <span style="font-size: 24px;">场景覆盖</span>
            </div>
          </div>
          <hr style="width:300px;margin: 20px 0 0 30px;border: 1px solid white;opacity: 0.7;">
          <div style="margin: 20px 0 20px 30px;color: white;text-align: left;height: 50px;line-height: 40px">
            <el-icon size="50px" color="white" style="vertical-align: bottom;"><Cpu/></el-icon>
            <div style="text-align: left;display: inline-block;">
              <span style="font-size: 24px;">资源开放</span>
            </div>
          </div>
          <hr style="width:300px;margin: 20px 0 0 30px;border: 1px solid white;opacity: 0.7;">
          <div style="margin: 20px 0 20px 30px;color: white;text-align: left;height: 50px;line-height: 40px">
            <el-icon size="50px" color="white" style="vertical-align: bottom;"><Briefcase /></el-icon>
              <div style="text-align: left;display: inline-block;">
                <span>合作共创</span>
              </div>
            </div>
        </div>
        <hr style="width:300px;margin: 20px 0 0 30px;border: 1px solid white;opacity: 0.7;">
        <el-button size="large" style="width: 150px;color: limegreen;float:left;margin: 70px 0 0 30px">了解更多</el-button>
      </div>
    </div>

    <div class="b">
      <div class="b1">
          <img src="/img1/f2/f2.png">
        <div class="t">
          <div class="t1">为商家提供经营服务</div>
          <div class="t2">以微信支付为基础能力，结合流量开放和数据能力，提供增值服务</div>
          <div class="t3">
            <span>流量开放</span>
            <span>数字营销</span>
            <span>智慧经营</span>
          </div>
        </div>
      </div>
      <div class="b2">
        <div style="margin: 150px 0 50px 30px;color: white;text-align: left">
          <p style="font-size: 36px;margin-bottom: 10px">为商家提供经营服务</p>
          <span style="font-size: 14px;">以微信支付为基础能力，结合流量开放和数据能力，提供增值服务</span>
        </div>
        <div>
          <div style="margin: 0 0 0 30px;color: white;text-align: left;height: 50px;line-height: 40px">
            <el-icon size="50px" color="white" style="vertical-align: bottom;"><Orange /></el-icon>
            <div style="text-align: left;display: inline-block;">
              <span style="font-size: 24px;">流量开放</span>
            </div>
          </div>
          <hr style="width:300px;margin: 20px 0 0 30px;border: 1px solid white;opacity: 0.7;">
          <div style="margin: 20px 0 20px 30px;color: white;text-align: left;height: 50px;line-height: 40px">
            <el-icon size="50px" color="white" style="vertical-align: bottom;"><Avatar/></el-icon>
            <div style="text-align: left;display: inline-block;">
              <span style="font-size: 24px;">数字营销</span>
            </div>
          </div>
          <hr style="width:300px;margin: 20px 0 0 30px;border: 1px solid white;opacity: 0.7;">
          <div style="margin: 20px 0 20px 30px;color: white;text-align: left;height: 50px;line-height: 40px">
            <el-icon size="50px" color="white" style="vertical-align: bottom;"><List /></el-icon>
            <div style="text-align: left;display: inline-block;">
              <span>智慧经营</span>
            </div>
          </div>
        </div>
        <hr style="width:300px;margin: 20px 0 0 30px;border: 1px solid white;opacity: 0.7;">
        <el-button size="large" style="width: 150px;color: limegreen;float:left;margin: 70px 0 0 30px">了解更多</el-button>
      </div>
    </div>
    <div class="c">
      <div class="c1">
          <img src="/img1/f2/f3.png" style="border-top-right-radius: 3px;border-bottom-right-radius: 3px">
        <div class="t">
          <div class="t1">为商家提供硬件服务</div>
          <div class="t2">开放硬件设备生态，整合软硬件产品能力，提升商家收银体验</div>
          <div class="t3">
            <span>收银升级</span>
            <span>数字转型</span>
          </div>
        </div>
      </div>
      <div class="c2">
        <div style="margin: 250px 0 50px 30px;color: white;text-align: left">
          <p style="font-size: 36px;margin-bottom: 10px">为商家提供硬件服务</p>
          <span style="font-size: 14px;">开放硬件设备生态，整合软硬件产品能力，提升商家收银体验</span>
        </div>
        <div>
          <div style="margin: 20px 0 20px 30px;color: white;text-align: left;height: 50px;line-height: 40px">
            <el-icon size="50px" color="white" style="vertical-align: bottom;"><Avatar/></el-icon>
            <div style="text-align: left;display: inline-block;">
              <span style="font-size: 24px;">收银升级</span>
            </div>
          </div>
          <hr style="width:300px;margin: 20px 0 0 30px;border: 1px solid white;opacity: 0.7;">
          <div style="margin: 20px 0 20px 30px;color: white;text-align: left;height: 50px;line-height: 40px">
            <el-icon size="50px" color="white" style="vertical-align: bottom;"><List /></el-icon>
            <div style="text-align: left;display: inline-block;">
              <span>数字转型</span>
            </div>
          </div>
        </div>
        <hr style="width:300px;margin: 20px 0 0 30px;border: 1px solid white;opacity: 0.7;">
        <el-button size="large" style="width: 150px;color: limegreen;float:left;margin: 70px 0 0 30px">了解更多</el-button>
      </div>
    </div>
  </div>
  <div class="f3" style="position: relative;" id="section3">
    <div class="d">
      <div style="width: 50%;height: 350px;float: left;position: relative;" class="d1">
        <img src="f1.png" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">
        <div class="t">
          <el-icon style="position: absolute; top: 225px; left: 50%; color: #FFFFFF; background-color:#1AAD19; border-radius: 50%;margin-bottom: 14px;" size="50px"><ShoppingBag /></el-icon>
          <div style="position: absolute; top: 300px; /* 350px + 50px (图标高度) */ left: 50%;  text-align: center; line-height: 16px;color: black;">技术服务费</div>
        </div>
      </div>
      <div class="d2">
        <div style="margin: 0;color: white;text-align: center">
          <el-icon size="50px" style="margin-top: 60px;"><Present /></el-icon>
          <p style="font-size: 24px;margin: 20px 0 10px 0;">技术服务费</p>
          <p style="font-size: 12px;">多种行业技术服务费合作方案，协助合作伙伴拓业务</p>
          <el-button size="large" style="color: limegreen;margin-top: 50px">了解更多</el-button>
        </div>
      </div>
    </div>
    <div class="e">
      <div style="width: 50%;height: 350px;float: right;position: relative;" class="e1">
        <img src="f2.png" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">
        <div class="t">
            <el-icon style="position: absolute; top: 225px; left: 50%; color: #FFFFFF; background-color:#1AAD19; border-radius: 50%;margin-bottom: 14px;" size="50px"><Money /></el-icon>
            <div style="position: absolute; top: 300px; /* 350px + 50px (图标高度) */ left: 50%;text-align: center; line-height: 16px;color: black;">合作工具箱</div>
        </div>
      </div>
      <div class="e2">
        <div style="margin: 0;color: white;text-align: center">
          <el-icon size="50px" style="margin-top: 60px;"><Briefcase /></el-icon>
          <p style="font-size: 24px;margin: 20px 0 10px 0;">合作工具箱</p>
          <p style="font-size: 12px;">组合场景解决方案，一键解锁多个产品，高效服务商家智慧经营</p>
          <el-button size="large" style="color: limegreen;margin-top: 50px">了解更多</el-button>
        </div>
      </div>
    </div>
    <div class="f">
      <div style="width: 50%;height: 350px;float: left;position: relative;" class="f1">
        <img src="f3.png" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">
          <div class="t">
            <el-icon style="position: absolute; top: 200px; left: 50%; color: #FFFFFF; background-color:#1AAD19; border-radius: 50%;margin-bottom: 14px;" size="50px"><Printer /></el-icon>
            <div style="position: absolute; top: 270px; /* 350px + 50px (图标高度) */ left: 50%;  text-align: center; line-height: 16px;color: black;">物料平台</div>
          </div>
        </div>
      <div class="f2">
        <div style="margin: 0;color: white;text-align: center">
          <el-icon size="50px" style="margin-top: 60px;"><Cellphone /></el-icon>
          <p style="font-size: 24px;margin: 20px 0 10px 0;">物料平台</p>
          <p style="font-size: 12px;">专业行业物料模板，可视化的自助设计，轻松打造商家专属物料</p>
          <el-button size="large" style="color: limegreen;margin-top: 50px">了解更多</el-button>
        </div>
      </div>
    </div>
    <div class="g">
      <div style="width: 50%;height: 350px;float: right;position: absolute;top: 350px; right: 0;" class="g1">
        <img src="f4.png" style="width: 100%; height: 100%; ">
        <div class="t">
        <el-icon style="position: absolute; top: 200px; left: 50%;color: #FFFFFF; background-color:#1AAD19; border-radius: 50%;margin-bottom: 14px;" size="50px"><Orange /></el-icon>
        <div style="position: absolute; top: 270px; /* 350px + 50px (图标高度) */ left: 50%;text-align: center; line-height: 16px;color: black;">成长计划</div>
        </div>
      </div>
      <div class="g2">
        <div style="margin: 0;color: white;text-align: center">
          <el-icon size="50px" style="margin-top: 60px;"><TrendCharts /></el-icon>
          <p style="font-size: 24px;margin: 20px 0 10px 0;">成长计划</p>
          <p style="font-size: 12px;">产品能力深度解析，行业共创案例沉淀，协助合作伙伴快速成长</p>
          <el-button size="large" style="color: limegreen;margin-top: 50px">了解更多</el-button>
        </div>
      </div>
    </div>
  </div>


  <!--  4F内容  -->
  <div class="_04-title" id="section4">
    <div class="_04-content-1" style="position: relative;">
      <div class="_04-content-1-1">成为微信支付合作伙伴</div>
      <img src="bg.png" style="position: absolute;top: 82px;left: 200px;">
      <img src="bg.png" style="position: absolute;top: 82px;left: 430px;">
      <img src="bg.png" style="position: absolute;top: 82px;left: 730px;">
      <div class="_04-content-1-2" style="background-color: rgb(247,247,250);">
        <div v-for="(p,i) in _4arr" class="_04-content-2">
          <div class="_04-content-2-1">{{i+1}}</div>
          <div class="_04-content-2-2">{{p.title}}</div>
          <div class="_04-content-2-3">{{p.content}}</div>
        </div>
      </div>
      <el-button type="success" class="_04-content-3">成为合作伙伴</el-button>
    </div>
    <el-footer style="background-color: rgb(50,50,50);color:#666;height: 250px;padding:50px;text-align:center;">
      <!--设置版心 定宽且居中-->
      <div style="width: 1200px;margin: 0 auto;">
        <el-row :gutter="10">
          <!--底部中间区域 三列信息 注意此处内容有单独的CSS内部样式 id="footer-center"-->
          <el-col :span="12" id="footer-center" style="margin: 0 auto">
            <!--继续嵌套还是从row开始 -->
            <el-row :gutter="30">
              <el-col :span="6">
                <h3>关于我们</h3>
                <p>关于微信支付</p >
                <p>合作规则</p >
                <p>平台使用协议</p >
                <p>支付服务协议</p >
                <p>联系我们</p >
              </el-col>
              <el-col :span="6">
                <h3>服务与支持</h3>
                <p>开发文档(商户)</p >
                <p>开发文档(合作伙伴)</p >
                <p>物理下载</p >
                <p>帮助中心</p >
              </el-col>
              <el-col :span="6">
                <h3>友情链接</h3>
                <p>微信开放平台</p >
                <p>微信开放平台</p >
                <p>企业微信</p >
              </el-col>
              <el-col :span="6">
                <h3>客服帮助</h3>
                <p>自助服务专区</p >
                <p>客服:95017-2</p >
                <p>(周一到周五 09:00-18:00)</p >
              </el-col>
            </el-row>

          </el-col>
          <el-row>
            <el-col style="position: relative;top:-20px">
              <p style="font-size: 11px;color: white;height: 20px;">关注微信支付服务商助手公众号</p >
              <img src="1.jpg" class="img2" style="width: 129px;height: 129px;">
            </el-col>
          </el-row>
        </el-row>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import {ref} from "vue";
const on = ref(true);
const off = ref(false);
const click1 = () => {
  on.value = false;
  off.value = true;
}
const click2 = () => {
  on.value = true;
  off.value = false;
}
document.addEventListener("DOMContentLoaded", function() {
  var firstLink = document.querySelector(".carousel li:first-child a");

  firstLink.addEventListener("click", function(event) {
    event.preventDefault(); // 阻止默认跳转行为

    // 滚动到页面顶部
    window.scrollTo({
      top: 0,
      behavior: "smooth" // 平滑滚动
    });
  });
});
const _4arr=ref([
  {title:'合作伙伴入驻',content:'注册成为微信支付合作伙伴'},
  {title:'商家管理',content:''},
  {title:'开通合作工具箱',content:'选择适合企业发展的合作工具箱'},
  {title:'申请技术服务费',content:'申请合作工具箱有关的技术服务费'},
]);
document.addEventListener('DOMContentLoaded', function () {
  const a1 = document.querySelector('.f2 > .a > .a1');
  const a2 = document.querySelector('.f2 > .a > .a2');
  const t = document.querySelector('.f2 > .a > .a1 > .t');

  function showContent() {
    t.style.transform = 'translateY(100%)';
    t.style.opacity = '0';

    a2.style.transform = 'translateY(-100%)';
    a2.style.opacity = '1';
    a2.style.zIndex = '10';
  }

  function hideContent() {
    t.style.transform = '';
    t.style.opacity = '';

    a2.style.transform = '';
    a2.style.opacity = '0';
    a2.style.zIndex = '-1';
  }

  a1.addEventListener('mouseover', showContent);
  a2.addEventListener('mouseover', showContent);

  a1.addEventListener('mouseout', function (event) {
    // 检查鼠标是否移到 a2 上
    if (!a2.contains(event.relatedTarget)) {
      hideContent();
    }
  });

  a2.addEventListener('mouseout', function (event) {
    // 检查鼠标是否移回到 a1 上
    if (!a1.contains(event.relatedTarget)) {
      hideContent();
    }
  });
});
document.addEventListener('DOMContentLoaded', function () {
  const b1 = document.querySelector('.f2 > .b > .b1');
  const b2 = document.querySelector('.f2 > .b > .b2');
  const t2 = document.querySelector('.f2 > .b > .b1 > .t');

  function showContent() {
    t2.style.transform = 'translateY(100%)';
    t2.style.opacity = '0';

    b2.style.transform = 'translateY(-100%)';
    b2.style.opacity = '1';
    b2.style.zIndex = '10';
  }

  function hideContent() {
    t2.style.transform = '';
    t2.style.opacity = '';

    b2.style.transform = '';
    b2.style.opacity = '0';
    b2.style.zIndex = '-1';
  }

  b1.addEventListener('mouseover', showContent);
  b2.addEventListener('mouseover', showContent);

  b1.addEventListener('mouseout', function (event) {
    // 检查鼠标是否移到 b2 上
    if (!b2.contains(event.relatedTarget)) {
      hideContent();
    }
  });

  b2.addEventListener('mouseout', function (event) {
    // 检查鼠标是否移回到 b1 上
    if (!b1.contains(event.relatedTarget)) {
      hideContent();
    }
  });
});
document.addEventListener('DOMContentLoaded', function () {
  const c1 = document.querySelector('.f2 > .c > .c1');
  const c2 = document.querySelector('.f2 > .c > .c2');
  const t3 = document.querySelector('.f2 > .c > .c1 > .t');

  function showContent() {
    t3.style.transform = 'translateY(100%)';
    t3.style.opacity = '0';

    c2.style.transform = 'translateY(-100%)';
    c2.style.opacity = '1';
    c2.style.zIndex = '10';
  }

  function hideContent() {
    t3.style.transform = '';
    t3.style.opacity = '';

    c2.style.transform = '';
    c2.style.opacity = '0';
    c2.style.zIndex = '-1';
  }

  c1.addEventListener('mouseover', showContent);
  c2.addEventListener('mouseover', showContent);

  c1.addEventListener('mouseout', function (event) {
    // 检查鼠标是否移到 c2 上
    if (!c2.contains(event.relatedTarget)) {
      hideContent();
    }
  });

  c2.addEventListener('mouseout', function (event) {
    // 检查鼠标是否移回到 c1 上
    if (!c1.contains(event.relatedTarget)) {
      hideContent();
    }
  });
});
document.addEventListener('DOMContentLoaded', function () {
  const d1 = document.querySelector('.f3 > .d > .d1');
  const d2 = document.querySelector('.f3 > .d > .d2');
  const t4 = document.querySelector('.f3 > .d > .d1 > .t');


  function showContent() {
    t4.style.transform = 'translateY(100%)';
    t4.style.opacity = '0';

    d2.style.transform = 'translateY(-100%)';
    d2.style.opacity = '1';
    d2.style.zIndex = '10';
  }

  function hideContent() {
    t4.style.transform = '';
    t4.style.opacity = '';

    d2.style.transform = '';
    d2.style.opacity = '0';
    d2.style.zIndex = '-1';
  }

  d1.addEventListener('mouseover', showContent);
  d2.addEventListener('mouseover', showContent);

  d1.addEventListener('mouseout', function (event) {

    if (!d2.contains(event.relatedTarget)) {
      hideContent();
    }
  });
  d2.addEventListener('mouseout', function (event) {
    if (!d1.contains(event.relatedTarget)) {
      hideContent();
    }
  });
});
document.addEventListener('DOMContentLoaded', function () {
  const e1 = document.querySelector('.f3 > .e > .e1');
  const e2 = document.querySelector('.f3 > .e > .e2');
  const t5 = document.querySelector('.f3 > .e > .e1 > .t');


  function showContent() {
    t5.style.transform = 'translateY(100%)';
    t5.style.opacity = '0';

    e2.style.transform = 'translateY(-100%)';
    e2.style.opacity = '1';
    e2.style.zIndex = '10';
  }

  function hideContent() {
    t5.style.transform = '';
    t5.style.opacity = '';

    e2.style.transform = '';
    e2.style.opacity = '0';
    e2.style.zIndex = '-1';
  }

  e1.addEventListener('mouseover', showContent);
  e2.addEventListener('mouseover', showContent);

  e1.addEventListener('mouseout', function (event) {

    if (!e2.contains(event.relatedTarget)) {
      hideContent();
    }
  });
  e2.addEventListener('mouseout', function (event) {
    if (!e1.contains(event.relatedTarget)) {
      hideContent();
    }
  });
});
document.addEventListener('DOMContentLoaded', function () {
  const f1 = document.querySelector('.f3 > .f > .f1');
  const f2 = document.querySelector('.f3 > .f > .f2');
  const t6 = document.querySelector('.f3 > .f> .f1 > .t');


  function showContent() {
    t6.style.transform = 'translateY(100%)';
    t6.style.opacity = '0';

    f2.style.transform = 'translateY(-100%)';
    f2.style.opacity = '1';
    f2.style.zIndex = '10';
  }

  function hideContent() {
    t6.style.transform = '';
    t6.style.opacity = '';

    f2.style.transform = '';
    f2.style.opacity = '0';
    f2.style.zIndex = '-1';
  }

  f1.addEventListener('mouseover', showContent);
  f2.addEventListener('mouseover', showContent);

  f1.addEventListener('mouseout', function (event) {

    if (!f2.contains(event.relatedTarget)) {
      hideContent();
    }
  });
  f2.addEventListener('mouseout', function (event) {
    if (!f1.contains(event.relatedTarget)) {
      hideContent();
    }
  });
});
document.addEventListener('DOMContentLoaded', function () {
  const g1 = document.querySelector('.f3 > .g > .g1');
  const g2 = document.querySelector('.f3 > .g > .g2');
  const t7 = document.querySelector('.f3 > .g> .g1 > .t');


  function showContent() {
    t7.style.transform = 'translateY(100%)';
    t7.style.opacity = '0';

    g2.style.transform = 'translateY(-100%)';
    g2.style.opacity = '1';
    g2.style.zIndex = '10';
  }

  function hideContent() {
    t7.style.transform = '';
    t7.style.opacity = '';

    g2.style.transform = '';
    g2.style.opacity = '0';
    g2.style.zIndex = '-1';
  }

  g1.addEventListener('mouseover', showContent);
  g2.addEventListener('mouseover', showContent);

  g1.addEventListener('mouseout', function (event) {

    if (!g2.contains(event.relatedTarget)) {
      hideContent();
    }
  });
  g2.addEventListener('mouseout', function (event) {
    if (!g1.contains(event.relatedTarget)) {
      hideContent();
    }
  });
});
</script>

<style scoped>
.flex-grow {
  width: 180px;
}
  *{
    margin: 0;
    padding: 0;
  }
.carousel ul {
  overflow: hidden;
  position: fixed;
  /*距离.carousel>.center参照物移动*/
  top: 300px;
  right: 20px;
  list-style: none;
  z-index: 99;

}
.carousel ul>li {
  width: 12px;
  height: 12px;
  background-color: orange;;
  /*切成圆形*/
  border-radius: 6px;
  margin: 12px;
  /*横置*/
}
.carousel ul>li>a{
  opacity: 0;
  text-decoration: none;
}
  .top{
    width: 100%;
    margin: 0 auto;
  }
  .hr{
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border: 3px solid limegreen;
  }
  .head{
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
  }
  .center{
    width: 1000px;
    height: 88px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }
  .center img{
    float: left;
    width: 100%;

  }
  .title{
    position: absolute;
    bottom: 0;
  }
  .video-box{
    width: 100%;
    margin-top: 90px;
    position: relative;

  }
  .video{
    width: 100%;
    opacity: 0.9;
  }
  .video-bo{
    width: 100%;
    height: 125px;
    background-color: limegreen;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    position: relative;
    top: -25px;
    z-index: 55;
    color: white;
    line-height: 125px;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    font-family: 华文行楷;
  }
  .video-box>.video-bo img{
    margin: 0 30px;
    border-radius: 5px;
  }
  .login{
    width: 300px;
    position: absolute;
    z-index: 1;
    top: 55px;
    left: 210px;
  }
  .l1{
  margin-top: 10px;
}
  .l2{
    margin: 30px;
  }
  a{
    text-decoration: none;
  }
  a:hover{
    text-decoration:underline;
  }
  .login1{
    position: absolute;
    top: 0;
    right: 0;
  }
.login2{
  position: absolute;
  top: 0;
  right: 0;
}
.l2{
  position: absolute;
  top:0;
}
  .f2{
    width: 100%;
    position: relative;
    top: -25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .f2>.a{
    width: 501px;
    height: 767px;
    overflow: hidden;

  }
.f2>.a>.a1{
  position: relative;
}
  .f2>.a>.a1>img{
    width: 100%;
  }
  .f2>.a>.a1>.t{
    width: 400px;
    height: 300px;
    position: absolute;
    margin: 0 50px;
    bottom: 100px;
    color: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
.f2>.a>.a1>.t>.t1{
  margin-top: 80px;
  margin-bottom: 30px;
  font-size: 32px;
}
.f2>.a>.a1>.t>.t2{
  margin-bottom: 70px;
  font-size: 18px;

}
.f2>.a>.a1>.t>.t3 span{
  display: block;
  width: 80px;
  height: 30px;
  border: 1px solid gray;
  font-size: 14px;
  margin: 0 20px;
  background-color: gray;
  line-height: 30px;
  float: left;
  opacity: 0.7;
  border-radius: 5px;
}

.f2>.a>.a2{
  width: 501px;
  height: 767px;
  position: absolute;
  opacity: 0;
  top: 100%;
  background-color: rgba(0, 128, 0, 0.7);

}

.f2>.b{
  overflow: hidden;
  width: 501px;
  height: 767px;
  //float: left;
}
.f2>.b>.b1>img{
  width: 100%;
}
.f2>.b>.b1>.t{
  width: 400px;
  height: 300px;
  //background-color: pink;
  position: absolute;
  margin: 0 50px;
  bottom: 100px;
  color: white;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.f2>.b>.b1>.t>.t1{
  margin-top: 80px;
  margin-bottom: 30px;
  font-size: 32px;
}
.f2>.b>.b1>.t>.t2{
  margin-bottom: 46px;
  font-size: 18px;

}
.f2>.b>.b1>.t>.t3 span{
  display: block;
  width: 80px;
  height: 30px;
  border: 1px solid gray;
  font-size: 14px;
  margin: 0 20px;
  background-color: gray;
  line-height: 30px;
  float: left;
  opacity: 0.7;
  border-radius: 5px;
}
.f2>.b>.b2{
  width: 501px;
  height: 767px;
  position: absolute;
  top: 100%;
  opacity: 0;
  background-color: rgba(0, 128, 0,0.7);
}

.f2>.c{
  overflow: hidden;
  width: 501px;
  height: 767px;
}
.f2>.c>.c1>img{
  width: 100%;
}
.f2>.c>.c1>.t{
  width: 400px;
  height: 300px;
  //background-color: pink;
  position: absolute;
  margin: 0 50px;
  bottom: 100px;
  color: white;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.f2>.c>.c1>.t>.t1{
  margin-top: 80px;
  margin-bottom: 30px;
  font-size: 32px;
}
.f2>.c>.c1>.t>.t2{
  margin-bottom: 46px;
  font-size: 18px;

}
.f2>.c>.c1>.t>.t3 span{
  display: block;
  width: 80px;
  height: 30px;
  border: 1px solid gray;
  font-size: 14px;
  margin: 0 20px;
  background-color: gray;
  line-height: 30px;
  float: left;
  opacity: 0.7;
  border-radius: 5px;
}
.f2>.c>.c2{
  width: 501px;
  height: 767px;
  position: absolute;
  top: 100%;
  opacity: 0;
  background-color: rgba(0, 128, 0, 0.7);
}
.f3{
    width: 100%;
    height: 700px;
    position: relative;
    top: -25px;

  }
.f3>.d>.d2{
  width: 752px;
  height: 350px;
  position: absolute;
  top: 350px;
  opacity: 0;
  background-color: rgba(0, 128, 0, 0.7);
}
.f3>.e>.e2{
  width: 752px;
  height: 350px;
  position: absolute;
  top: 350px;
  right: 0;
  opacity: 0;
  background-color: rgba(0, 128, 0, 0.7);
}
.f3>.f>.f2{
  width: 752px;
  height: 350px;
  position: absolute;
  top: 100%;
  opacity: 0;
  background-color: rgba(0, 128, 0, 0.7);
}
.f3>.g>.g2{
  width: 752px;
  height: 350px;
  position: absolute;
  top: 100%;
  right: 0;
  opacity: 0;
  background-color: rgba(0, 128, 0, 0.7);
}
._04-title{
    width: 100%;
    height: 700px;
  overflow: hidden;
  }
._04-content-1{
  width: 1025px;
  height: 300px;
  margin: 50px auto 150px auto;
  position: relative;
  top: 50px;
}
._04-content-1-1{
  font-size: 32px;
  color: #0E0E0E;
  margin-bottom: 41px;
}
._04-content-1-2{
  width: 1026px;
  height: 200px;
  margin-bottom: 41px;
}
._04-content-2{
  height: 128px;
  width: 220px;
  float: left;
  margin: 32px 20px 40px 16px;
}
._04-content-2>div{
  text-align: left;
}
._04-content-2-1{
  font-size: 60px;
  color: #333333;
  margin-bottom: 24px;
}
._04-content-2-2{
  font-size: 20px;
  color:#333333;
  margin-bottom: 10px;
}
._04-content-2-3 {
  font-size: 14px;
  color: #999999;
}
._04-content-3{
  width: 240px;
  height: 64px;
  color: #FFFFFF;
  font-size: 20px;

}

</style>
